<template>
    
    <div>
        {{stu}}, {{salary}}
        <button @click="doSome"> do</button>
    </div>
</template>
<script>
import { reactive, watch, ref } from 'vue'
export default {
    setup() {
        const salary = ref(10000)
        const stu  = reactive({
            address: {city: 'wuhan'}
        })

        watch(salary, (newVal, oldVal) => {
            console.log('监听单个数据', newVal, oldVal)
        })

        watch(stu, (newVal, oldVal) => {
            console.log('监听单个数据', newVal, oldVal)
        })

        watch([stu, salary], (newVal, oldVal) => {
            console.log('监听多个数据', newVal, oldVal)
        })

        watch(()=>stu.address , (newVal, oldVal) => {
            console.log('第一个参数是函数', newVal, oldVal)
        }, {deep: true})

        // 测试按钮，修改数据
        const doSome = () => {
            salary.value +=1
            stu.address.city = ''
        }

        return {stu, salary, doSome}
    }
}
</script>